<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册 - Steam游戏商城</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        body {
            background: #171a21 url('https://pic2.zhimg.com/v2-6035471bcf6a7cd59257ae4017050013_r.jpg?source=1940ef5c') no-repeat center center fixed;
            background-size: cover;
            backdrop-filter: blur(3px);
            min-height: 100vh;
        }

        .card {
            background: rgba(27, 40, 56, 0.9);
            border: 1px solid rgba(102, 192, 244, 0.2);
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7);
        }

        .card-header {
            background: rgba(42, 71, 94, 0.8);
            border-bottom: 1px solid rgba(102, 192, 244, 0.2);
            color: #fff;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        }

        .form-control {
            background: rgba(42, 71, 94, 0.5);
            border: 1px solid rgba(102, 192, 244, 0.3);
            color: #fff;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            background: rgba(42, 71, 94, 0.7);
            border-color: #66c0f4;
            box-shadow: 0 0 0 0.2rem rgba(102, 192, 244, 0.25);
            color: #fff;
        }

        .btn-primary {
            background: linear-gradient(90deg, #66c0f4 0%, #2a475e 200%);
            border: none;
            font-weight: 500;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .btn-primary:hover {
            background: linear-gradient(90deg, #66c0f4 0%, #3a678e 200%);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 192, 244, 0.3);
        }

        .btn-primary:active {
            transform: translateY(1px);
        }

        .alert-danger {
            background: rgba(220, 53, 69, 0.1);
            border: 1px solid rgba(220, 53, 69, 0.3);
            color: #ff6b6b;
            display: flex;
            align-items: center;
        }

        .alert-danger i {
            margin-right: 8px;
        }

        a {
            color: #66c0f4;
            transition: color 0.3s ease;
        }

        a:hover {
            color: #99d6f9;
            text-decoration: none;
        }

        /* 添加输入框图标 */
        .form-group {
            position: relative;
        }

        .form-group i {
            position: absolute;
            left: 12px;
            top: 38px;
            color: rgba(102, 192, 244, 0.7);
        }

        #username, #email, #password {
            padding-left: 35px;
        }
    </style>
</head>
<body>
<div th:replace="~{fragments/header}"></div>

<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="text-center"><i class="fa fa-user-plus mr-2"></i>创建Steam账号</h3>
                </div>
                <div class="card-body">
                    <div th:if="${param.error}" class="alert alert-danger">
                        <i class="fa fa-exclamation-circle"></i>
                        <span>用户名或邮箱已存在</span>
                    </div>
                    <form th:action="@{/register}" method="post">
                        <div class="form-group">
                            <label for="username">用户名</label>
                            <i class="fa fa-user"></i>
                            <input type="text" class="form-control" id="username" name="username" required>
                        </div>
                        <div class="form-group">
                            <label for="email">邮箱</label>
                            <i class="fa fa-envelope"></i>
                            <input type="email" class="form-control" id="email" name="email" required>
                        </div>
                        <div class="form-group">
                            <label for="password">密码</label>
                            <i class="fa fa-lock"></i>
                            <input type="password" class="form-control" id="password" name="password" required>
                        </div>
                        <button type="submit" class="btn btn-primary btn-block">
                            <i class="fa fa-check mr-2"></i>注册
                        </button>
                    </form>
                    <div class="text-center mt-3">
                        <a th:href="@{/login}">已有账号? 立即登录</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:replace="~{fragments/footer}"></div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
    // 添加输入框动画效果
    document.querySelectorAll('input').forEach(input => {
        input.addEventListener('focus', () => {
            input.parentElement.classList.add('scale-[1.01]');
        });
        input.addEventListener('blur', () => {
            input.parentElement.classList.remove('scale-[1.01]');
        });
    });
</script>
</body>
</html>
